<template>
  <div id="father"></div>
</template>

<script setup lang="ts">
import { h, onMounted, render } from 'vue'
// h函数 render函数 是vue中内置的函数
// h函数用于创建虚拟DOM 准确名字为 createVnode()
// reader函数用于渲染

// 1. 使用h函数创建虚拟dom
// 参数1 => 标签名/组件名
// 参数2 => 描述标签属性 没有则写null
// 参数3 => 标签/组件内容 或 数组

let li1 = h('li', null, '吃饭')
let li2 = h('li', null, '睡觉')
let li3 = h('li', null, '学习')

const vnode = h('ul', null, [li1, li2, li3])

// 2. 通过render渲染到结构中
// 参数1 => 需要渲染的虚拟DOM
// 参数2 => 虚拟DOM需要渲染的位置

onMounted(() => {
  render(vnode, document.querySelector('#father')!)
})
</script>

<style scoped></style>
